<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="./lib/vue.js"></script>
        <title>09 vue自定义组件</title>
    </head>
    <body>
        <div id="box">
            <navbar></navbar>
            <sidebar></sidebar>
        </div>

        <script>
            /**
            注意：
            1、组件一定要定义在new Vue()之前；
            2、组件定义必须有一个根结点，否则报错；
            3、父子组件之间的data无法直接共享使用；
            4、组件中data必须是一个带返回值的函数；
            **/
            //自定义全局组件
            Vue.component('navbar', {
                template: `<div style="background:yellow">
                    <button @click="handleClick()">back</button>
                    navbar--{{ navbarName }}
                    <button>home</button>
                    <gobalChild></gobalChild>
                </div>`,
                data() {
                    return {
                        navbarName: 'haha'
                    };
                },
                methods: {
                    handleClick() {
                        console.log('click back button');
                    }
                }
            });

            Vue.component('sidebar', {
                template: `<div style="background:red">
                    这是sidebar
                    <gobalChild></gobalChild>
                    <sideChild></sideChild>
                </div>`,
                //自定义局部组件
                components: {
                    sideChild: {
                        template: `<div>这是局部定义的sideChild组件</div>`
                    }
                }
            });

            Vue.component('gobalChild', {
                template: `<div>这是全局定义的child组件</div>`
            });

            const vm = new Vue({
                el: '#box'
            }); //box是root component
        </script>
    </body>
</html>
